/**
 * Created by ChenYong on 2017-08-10.
 *
 * 分配权限。
 */

$(function () {
    /** 权限表单的 jQuery 对象 */
    var $permissionForm = $("#permission_form");
    /** 用户 ID 的 jQuery 对象 */
    var $id = $permissionForm.find("input[name='id']");
    /** 多个角色 ID 的 jQuery 对象 */
    var $roleIds = $permissionForm.find("input[name='roleIds']");
    /** 显示已拥有的角色 DIV 的 jQuery 对象 */
    var $myRole = $("#my_role");
    /** 显示未拥有的角色 DIV 的 jQuery 对象 */
    var $otherRole = $("#other_role");
    /** 显示角色明细的 jQuery 对象 */
    var $roleDetail = $("#role_detail");
    /** 提交按钮的 jQuery 对象 */
    var $submitBtn = $permissionForm.find("button[name='submitBtn']");
    /** 已拥有角色的按钮模版 */
    var myRoleBtnTpl = "<button type='button' class='btn btn-xs btn-danger m-10 role-btn' data-id='{0}' data-type='1'><i class='ace-icon iconfont icon-fork f-s-12'></i>{1}</button>";
    /** 未拥有角色的按钮模版 */
    var otherRoleBtnTpl = "<button type='button' class='btn btn-xs btn-primary m-10 role-btn' data-id='{0}' data-type='0'><i class='ace-icon iconfont icon-plus f-s-12'></i>{1}</button>";
    /** 角色明细的模版 */
    var roleDetailTpl = "<li>1、角色名称：{0}；</li>" +
        "<li>2、角色代码：{1}；</li>" +
        "<li>3、拥有的资源：{2}；</li>" +
        "<li>4、拥有的权限：{3}。</li>";
    /** 所有角色 */
    var roles = [];
    /** 已拥有的角色 */
    var myRoles = [];
    /** 未拥有的角色 */
    var otherRoles = [];

    getRoleData();

    // 监听点击角色按钮
    $(document).on("click", ".role-btn", function () {
        var $this = $(this);
        var id = $this.data("id");
        var type = $this.data("type");

        hideRoleDetail();

        // 如果是未拥有的角色，则添加
        if ($.getNumber(type) == 0) {
            myRoles.push($.getObjFromObjArray(roles, "id", id));

            $.deleteObjInObjArray(otherRoles, "id", id);

            // 如果是已拥有的角色，则删除
        } else if ($.getNumber(type) == 1) {
            otherRoles.push($.getObjFromObjArray(roles, "id", id));

            $.deleteObjInObjArray(myRoles, "id", id);
        }

        showRoleTag();
    });

    // 监听鼠标进入角色按钮
    $(document).on("mouseenter", ".role-btn", function () {
        var $this = $(this);
        var id = $this.data("id");

        showRoleDetailByRoleId(id);
    });

    // 监听鼠标离开角色按钮
    $(document).on("mouseleave", ".role-btn", function () {
        var $this = $(this);
        var id = $this.data("id");

        hideRoleDetail();
    });

    // 监听点击提交按钮
    $submitBtn.click(function () {
        var $this = $(this);

        $roleIds.val($.parseObjArray2Str(myRoles, "id", "|"));

        $this.html("<i class='ace-icon fa fa-spinner fa-spin bigger-150'></i>正在提交…").attr({"disabled": "disabled"});

        // 提交表单
        $permissionForm.submit();
    });

    /**
     * 获取角色数据。
     */
    function getRoleData() {
        $.myAjax({
            url: "web/permission/role.json",
            modal: true,
            data: {
                id: $id.val()
            },
            successFn: function (data) {
                $.each(data.results[0], function (i, e) {
                    roles.push(e);
                    myRoles.push(e);
                });

                $.each(data.results[1], function (i, e) {
                    roles.push(e);
                    otherRoles.push(e);
                });

                showRoleTag();
            }
        });
    }

    /**
     * 显示角色按钮。
     */
    function showRoleTag() {
        var myRoleHtml = "";
        var otherRoleHtml = "";

        $.each(myRoles, function (i, e) {
            myRoleHtml += myRoleBtnTpl.format(e.id, e.roleName);
        });

        $.each(otherRoles, function (i, e) {
            otherRoleHtml += otherRoleBtnTpl.format(e.id, e.roleName);
        });

        $myRole.html(myRoleHtml);
        $otherRole.html(otherRoleHtml);
    }

    /**
     * 根据角色 ID 显示角色明细。
     *
     * @param roleId 角色 ID
     */
    function showRoleDetailByRoleId(roleId) {
        var role = $.getObjFromObjArray(roles, "id", roleId);

        if ($.isObject(role)) {
            var roleDetailHtml = roleDetailTpl.format(role.roleName, role.roleCode, role.resourceNames, role.permissionCodes);

            $roleDetail.find("ol").html(roleDetailHtml);
            $roleDetail.removeClass("display-none").addClass("display-block");
        }
    }

    /**
     * 隐藏角色明细。
     */
    function hideRoleDetail() {
        $roleDetail.find("ol").html("");
        $roleDetail.removeClass("display-block").addClass("display-none");
    }
});